<template>
  <el-row :gutter="0">
    <el-col :span="24" :offset="0" class="shop-detail">
      <header class="shop-detail-header">
        <span class="good-name">{{ targetGood?.name }}</span>
      </header>

      <div class="shop-detail-content">
        <div class="product-gallery">
          <img class="main-image" :src="targetGood?.image" alt="product" />
        </div>

        <div class="product-info">
          <h1 class="product-title">{{ targetGood?.name }}</h1>

          <div class="product-price">
            <span class="price-label">价格</span>
            <span class="price-value">¥{{ targetGood?.price }}</span>
          </div>

          <div class="product-services">
            <div class="service-item">
              <el-icon><Select /></el-icon>
              <span>小米自营 / 官方正品</span>
            </div>
            <div class="service-item">
              <el-icon><Select /></el-icon>
              <span>7天无理由退货（到店自取拆封后不支持）</span>
            </div>
            <div class="service-item">
              <el-icon><Select /></el-icon>
              <span>全国联保</span>
            </div>
          </div>

          <div class="product-actions">
            <el-button size="large" class="buy-button" @click="handleBuy"
              >立即购买</el-button
            >
            <el-button size="large" class="cart-button" @click="handleAddToCart"
              >加入购物车</el-button
            >
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { ref, watch } from "vue";
  import { useRoute } from "vue-router";
  import { ElMessage } from "element-plus";
  import { GoodList, Good } from "../../../../types/Shop/index";
  const route = useRoute();
  const targetGood = ref<Good>();

  const goodList: GoodList[] = [
    {
      id: 1,
      category: "phone",
      goods: [
        {
          id: 1,
          name: "xiaomi 15",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=240&h=240&f=webp&q=90",
          price: 4999,
        },
        {
          id: 2,
          name: "xiaomi 15 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=240&h=240&f=webp&q=90",
          price: 5299,
        },
        {
          id: 3,
          name: "xiaomi 15 定制版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b17e107bd68b683c92e2245715bb7e54.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 4,
          name: "Xiaomi MIX Fold 4",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a8fec02d8edf2bc5d1ed975823465c6.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 8999,
        },
        {
          id: 5,
          name: "Xiaomi MIX Flip",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/851b0039398ebce5909ef54360b03d1a.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5999,
        },
        {
          id: 6,
          name: "Xiaomi Civi 4 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0dce5029e2367f3e70cd786cb192d04a.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2799,
        },
      ],
    },
    {
      id: 2,
      category: "redmi-phone",
      goods: [
        {
          id: 1,
          name: "REDMI K80",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f9da01e805c1d61c650bc27b754f173.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2499,
        },
        {
          id: 2,
          name: "Redmi Note 14 Pro+",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fa1b75b14fd41a5e1d98d25cbe6a1a89.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5299,
        },
        {
          id: 3,
          name: "Redmi Note 14 Pro+",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/106529ca2a44569b3955198ac43b525b.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1399,
        },
        {
          id: 4,
          name: "Xiaomi MIX Fold 4",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a8fec02d8edf2bc5d1ed975823465c6.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1399,
        },
        {
          id: 5,
          name: "Redmi Note 14 5G",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8681c417e99e914fdb10fe9657ee7f08.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1099,
        },
        {
          id: 6,
          name: "Redmi K70 至尊版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/409a54fc25b3a2f76790b045bed30a44.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2599,
        },
      ],
    },
    {
      id: 3,
      category: "tv",
      goods: [
        {
          id: 1,
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c3e9eafd588b3994ec7f370379ecd2f4.jpg?thumb=1&w=320&h=220&f=webp&q=90",
          name: "小米电视S Pro Mini LED系列",
          price: 4999,
        },
        {
          id: 2,
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/300ebd5f0fa66a25a52da567134db676.png?thumb=1&w=320&h=220&f=webp&q=90",
          name: "小米电视 S Mini LED 系列",
          price: 2999,
        },
        {
          id: 3,
          name: "Redmi 智能电视 X 2025款",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81ae6882d5145e6b823b6c09040f7722.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2599,
        },
        {
          id: 4,
          name: "Redmi 电视MAX系列",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a32280bcf272b9ee7cc03f01ff921db0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 5,
          name: "Redmi A系列电视 2025款",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bdbe7f972404bbdac0dea1330b4f3677.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
        {
          id: 6,
          name: "Redmi智能电视 A Pro系列",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e6b48d86726615297be7fa3c58164ceb.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1599,
        },
      ],
    },
    {
      id: 4,
      category: "computer",
      goods: [
        {
          id: 1,
          name: "Redmi G Pro 游戏本 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3a5d8336e401924d82e77c105bc90b8d.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 8499,
        },
        {
          id: 2,
          name: "Redmi Book Pro 14 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b3442ea8432af37766b3a1f900348469.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4999,
        },
        {
          id: 3,
          name: "Redmi Book Pro 16 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a1f6a20434940961e37aa3ab8f956217.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 6999,
        },
        {
          id: 4,
          name: "Redmi Book 16 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f6c0ada0b42c98348d0c222c6e3a844.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 3699,
        },
        {
          id: 5,
          name: "Redmi Book 14 2024",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/998fe69710528d4744a50ded67ec05ef.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 4299,
        },
        {
          id: 6,
          name: "Redmi Book Pro 15 2023 锐龙版",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/be052059c621f4a2d2ad605d8dabe879.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5299,
        },
      ],
    },
    {
      id: 5,
      category: "home",
      goods: [
        {
          id: 1,
          name: "米家冰箱对开门610L墨羽岩",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/531efbd4fd88b64a94079436851f56f1.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1999,
        },
        {
          id: 2,
          name: "米家冰箱 对开门536L 墨羽岩",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/52c8cab6760eadd9e01871dfbf27817f.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 1999,
        },
        {
          id: 3,
          name: "新风空调 立式3匹",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/950767dbf6e63b853d39d413e97685a8.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 5999,
        },
        {
          id: 4,
          name: "小米空调 1.5匹新1级能效",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/80416c1c7040aabbafa527a6ea652948.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 2299,
        },
        {
          id: 5,
          name: "米家洗烘一体机 12kg",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85009f514f7505825899635daeb761b0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
        {
          id: 6,
          name: "米家冰柜 203L",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b6361cf5069af62f4208ee326bd0e43.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 799,
        },
      ],
    },
    {
      id: 6,
      category: "router",
      goods: [
        {
          id: 1,
          name: "Xiaomi路由器AX3000T",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b5de7ae24c438974939453553420f1a0.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 159,
        },
        {
          id: 2,
          name: "Xiaomi全屋路由 BE3600Pro 套装",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f6ae2a9be0012e6ee477b6aed44c88a3.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 699,
        },
        {
          id: 3,
          name: "Xiaomi路由器 BE3600",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a8cc8ccb1c0e8cc58d96b7ec00df6634.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 229,
        },
        {
          id: 4,
          name: "Xiaomi路由器 BE6500 Pro",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2e4e053bd4dd41341ce8950ae1c3896d.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 649,
        },
        {
          id: 5,
          name: "Xiaomi路由器 BE5000",
          image:
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/81f833a72b840274af1cf5931fb516f8.png?thumb=1&w=320&h=220&f=webp&q=90",
          price: 279,
        },
        {
          id: 6,
          name: "小米路由器",
          image:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2ddc6a2789c5f5ff78fa4ca1402417c8.png?thumb=1&w=320&h=220",
          price: 399,
        },
      ],
    },
  ];

  // 查找商品
  const findGood = () => {
    const category = goodList.find(
      (item) => item.category === route.params.category
    );
    if (!category) {
      ElMessage.error("商品分类不存在");
      return;
    }

    const good = goodList[category.id].goods.find(
      (item) => item.id === Number(route.params.id)
    );

    if (!good) {
      return;
    }
    console.log(good, "xxx");
    targetGood.value = good;
  };

  // 监听路由变化
  watch(
    () => route.params,
    () => {
      findGood();
    },
    { immediate: true }
  );

  // 处理购买
  const handleBuy = () => {
    if (!targetGood.value) return;
    ElMessage.success(`正在购买: ${targetGood.value.name}`);
    // TODO: 实现购买逻辑
  };

  // 处理加入购物车
  const handleAddToCart = () => {
    if (!targetGood.value) return;
    ElMessage.success(`已将 ${targetGood.value.name} 加入购物车`);
    // TODO: 实现加入购物车逻辑
  };
</script>

<style lang="scss" scoped>
  @use "./../../../../styles/variable.scss" as *;

  .shop-detail {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
  }

  .shop-detail-header {
    z-index: 4;
    position: relative;
    background: $bsWhite;
    border-top: 1px solid rgb(224, 224, 224);
    height: 60px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.07);
    padding: 0px 100px;
  }

  .good-name {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 60px;
    color: #424242;
  }

  .shop-detail-content {
    max-width: 1200px;
    height: 80vh;
    margin: 20px auto;
    padding: 100px 20px;
    background: $bsWhite;
    border-radius: 8px;
    display: flex;
    gap: 40px;
  }

  .product-gallery {
    flex: 1;
    max-width: 500px;

    .main-image {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
  }

  .product-info {
    flex: 1;
    padding: 20px 0;
  }

  .product-title {
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: 400;
    color: #212121;
    margin-bottom: 20px;
  }

  .product-price {
    margin: 20px 0;
    padding: 20px;
    background: #fafafa;
    border-radius: 4px;

    .price-label {
      font-size: 14px;
      color: #666;
      margin-right: 10px;
    }

    .price-value {
      font-size: 28px;
      color: $themeColor;
      font-weight: bold;
    }
  }

  .product-actions {
    margin: 30px 0;
    display: flex;
    gap: 20px;

    .buy-button {
      width: 180px;
      height: 48px;
      font-size: 18px;
      background-color: $themeColor;
      color: $bsWhite;
      font-weight: 400;
    }

    .cart-button {
      width: 180px;
      height: 48px;
      font-size: 18px;
      background-color: $bsWhite;
      color: $themeColor;
      border: 1px solid $themeColor;
      font-weight: 400;
    }
  }

  :deep(.el-button) {
    border-radius: 0;
  }

  .product-services {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;

    .service-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      cursor: default;
      white-space: nowrap;
      color: #b0b0b0;
      font-size: 14px;

      i {
        color: $themeColor;
        margin-right: 8px;
      }
    }
  }
</style>
